<template>
	<view class="container">
		<my-bar :current="3"></my-bar>
		<!-- 滑动页面显示的导航 -->
		<view class="scroll_show">
			<!-- 状态栏 -->
			<view :style="{ height: statusHeight + 'px' }"></view>
			<!-- 胶囊区 -->
			<view class="nav" :style="{ height: capsuleHeight + 'px' }">我的</view>
		</view>
		<view class="my_box">
			<!-- 头像区域 -->
			<view class="message" :style="{ paddingTop: statusHeight + capsuleHeight + 'px' }">
				<view class="head_pic" @click="skipPages">
					<van-image round width="4rem" height="4rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
					<view class="head_handle">
						<text>登录</text>
						/
						<text>注册</text>
					</view>
				</view>
				<view class="head_msg">
					<van-row>
						<van-col :span="6" v-for="item in 4">
							<view class="data">-</view>
							<view class="title">优惠券</view>
						</van-col>
					</van-row>
				</view>
			</view>
			<!-- 会员福利区域 -->
			<view class="vip">
				<view class="left">
					<image src="../../static/more/vip.png"></image>
					<view>
						<text>VIP+金卡会员</text>
						全能最高可省￥950元
					</view>
				</view>
				<van-button size="mini" color="#333" round>立即开通</van-button>
			</view>
			<!-- 工具栏区域 -->
			<my-service></my-service>
			<!-- 服务列表区域 -->
			<view class="service"></view>
			<!-- 企业文化区域 -->
			<view class="culture"></view>
		</view>
	</view>
</template>

<script setup>
import { systemInfo } from '@/utils/mixins.js';
const { statusHeight, capsuleHeight } = systemInfo();

//点击头像区域 如果登录了就跳转个人详情页，没登陆就岛登陆页
const skipPages = () => {
	uni.navigateTo({
		url: '/pages/login/login'
	});
};
</script>

<style lang="scss" scoped>
.container {
	.scroll_show {
		display: none;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		.nav {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.my_box {
		// <!-- 头像区域 -->
		.message {
			padding: 40rpx 20rpx;
			background: linear-gradient(to bottom, #639fd2, #ffffff);
			// background: radial-gradient(circle, #639fd2, #86c3e2);
			.head_pic {
				display: flex;
				align-items: center;

				.head_handle {
					margin-left: 20rpx;
				}
			}
			.head_msg {
				text-align: center;
				.data {
				}
				.title {
				}
			}
		}
		// <!-- 会员福利区域 -->
		.vip {
			background-color: #f1da6d;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			.left {
				display: flex;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
				}
				view {
					margin-left: 10rpx;
					font-size: 24rpx;
					text {
						font-weight: bold;
					}
				}
			}
			:deep(.van-button) {
				padding: 0 20rpx !important;
				line-height: 1.8;
			}
		}

		// <!-- 服务列表区域 -->
		.service {
		}
		// <!-- 企业文化区域 -->
		.culture {
		}
	}
}
</style>
